<template>
  <div class="mardkwon">
    <MdPreview
      :editorId="id"
      :modelValue="content"
      :codeFoldable="false"
      previewTheme="vuepress"
      codeTheme="github"
      :codeStyle="{ whiteSpace: 'pre-wrap' }"
    />
  </div>
</template>
<script setup>
import '@/libs/md.js'
import { MdPreview, MdCatalog } from 'md-editor-v3'
// import 'md-editor-v3/lib/preview.css'

const props = defineProps({
  content: String,
})

const id = 'preview-only'
</script>
<style lang="scss" scoped>
.mardkwon {
  z-index: -1;
}
.md-editor {
  --md-bk-color: #f3f3f3;
  border-radius: 6px;
  font-size: 16px;
  padding-bottom: 20px;
}
:deep(.md-editor-code-block) {
  white-space: pre-wrap;
}
</style>
